<template>
  <div class="hospitalInfoCss">
    <div class="titleCss">漳平市和平镇卫生院</div>
    <div class="smallTitleCss">
      <span>医疗卫生</span>
      <span style="margin-left:20px;">定级医疗机构</span>
    </div>
    <div class="bodyCss">
      <div class="customTableCss" style="padding-bottom: 25px;border-bottom: 1px solid #f2f2f2;">
        <table border="1">
          <tbody>
            <tr>
              <td class="tableLabelCss">统一信用代码</td>
              <td>229397350881813143</td>
            </tr>
            <tr>
              <td class="tableLabelCss">所在镇</td>
              <td>和平镇</td>
              <td class="tableLabelCss">联系电话</td>
              <td>7580216</td>
            </tr>
            <tr>
              <td class="tableLabelCss">详细地址</td>
              <td>漳平市和平镇和平村</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="bodyTitleCss">检查视频</div>
      <div class="videoContentCss">
        <video controls class="videoCss">
          <source :src="mp4Url" type="video/mp4">
        </video>
        <el-button type="primary" class="videoBtnCss">对讲</el-button>
      </div>
      <div class="bodyTitleCss">检查内容</div>
      <div class="customTableCss" style="margin-top:20px;max-height:55vh;overflow-y:auto;padding-bottom:2px;">
        <table border="1">
          <tbody>
            <tr v-for="(item , index) in tableData" :key="index">
              <template v-if="item.isChild">
                <td>{{ item.data2 }}</td>
                <td class="tableValueCss" :style="item.data3 === 1 ? 'color: red;' : ''">{{ data3Map[item.data3] }}</td>
              </template>
              <template v-else>
                <td colspan="2" class="tableLabelCss">{{ item.data1 }}</td>
              </template>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="bodyTitleCss">检查情况</div>
      <el-input
        class="textareaCss"
        type="textarea"
        :autosize="{ minRows: 10, maxRows: 20}"
        placeholder="请输入内容"
        v-model="textarea2">
      </el-input>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      mp4Url:'',
      tableData:[],
      data3Map:{
        0:'√',
        1:'×',
        2:'合理缺项'
      },
      textarea2:null,
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
    goBackBtn(){
      this.$router.back()
    },
    getList(){
      const random = Math.floor( Math.random() * 10) + 5
      let list = []
      let list2 = []
      for( let i=0;i<random;i++){
        list.push({
          data1:`（${this.changeNumFun( i + 1)}）【测试数据】文字文字文字文字文字`,
          list:[]
        })
        list2.push({
          data1:`（${this.changeNumFun( i + 1)}）【测试数据】文字文字文字文字文字`,
          isChild: false,
        })
        const random2 = Math.floor( Math.random() * 5) + 1
        for( let j=0;j<random2;j++){
          const random2 = Math.floor( Math.random() * 3)
          list[i].list.push({
            data2:`${j+1}.文字文字文字文字文字【测试数据】`,
            data3:random2,
          })
          list2.push({
            data2:`${j+1}.文字文字文字文字文字【测试数据】`,
            data3:random2,
            isChild: true,
          })
        }
      }
      console.log('list=>',list);
      
      this.tableData = list2
    },
    changeNumFun(num){
      const numMap = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
      const unitMap = ['', '十', '百', '千', '万', '十万', '百万', '千万', '亿'];
      if (num === 0) {
        return numMap;
      }
      let chineseStr = ''
      let unitPos = 0
      let zero = true
      while (num > 0) {
          let digit = num % 10;
          if (digit === 0) {
              if (!zero) {
                  zero = true;
                  chineseStr = numMap[digit] + chineseStr;
              }
          } else {
              zero = false;
              chineseStr = numMap[digit] + unitMap[unitPos] + chineseStr;
          }
          unitPos++;
          num = Math.floor(num / 10);
      }
      if (chineseStr.startsWith('一十')) {
          chineseStr = chineseStr.substring(1);
      }
      return chineseStr.replace(/零+/g, '零')
    },
  },
}
</script>

<style lang="scss" scoped>
.hospitalInfoCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  .smallTitleCss{
    font-size: 18px;
    margin-top: 10px;
    text-align: center;
  }
  .bodyCss{
    margin-top: 20px;
    margin-left: 20px;
    width: calc( 100% - 10px);
    padding-right: 40px;
    overflow-y: auto;
    height: calc( 100% - 140px);
    padding-bottom: 20px;
    .customTableCss{
      table {
        border-collapse: collapse;
        width: 100%;
        line-height: 34px;
        &:not(:first-child){
          margin-top: 15px;
        }
        .tableLabelCss{
          font-weight: bold;
        }
        .tableValueCss{
          color: green;
          width: 200px;
          text-align: center;
          font-weight: bold;
        }
      }
      th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      tr:last-child td {
        border-bottom: none;
      }
      td:nth-child(2) {
        border-right: none;
      }
    }
    .bodyTitleCss{
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      margin-top: 20px;
    }
    .videoContentCss{
      margin-top: 20px;
      text-align: center;
      position: relative;
      .videoCss{
        width: 65%;
      }
      .videoBtnCss{
        transform: translate( calc( -100% - 10px) , calc( -100% - 40px) );
        bottom: 0;
        position: absolute;
      }
    }
    .textareaCss{
      margin-top: 20px;
    }
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
}
</style>